<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <style>
        div {
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>我是标题1 h1</h1>
        <h2>我是标题2 h2</h2>
        <h3>我是标题3 h3</h3>
        <h4>我是标题4 h4</h4>
        <h5>我是标题5 h5</h5>
        <h6>我是标题6 h6</h6>
        <br>
        <h1>我是标题1 h1.
            <small>我是副标题1 h1</small>
        </h1>
        <h2>我是标题2 h2.
            <small>我是副标题2 h2</small>
        </h2>
        <h3>我是标题3 h3.
            <small>我是副标题3 h3</small>
        </h3>
        <h4>我是标题4 h4.
            <small>我是副标题4 h4</small>
        </h4>
        <h5>我是标题5 h5.
            <small>我是副标题5 h5</small>
        </h5>
        <h6>我是标题6 h6.
            <small>我是副标题6 h6</small>
        </h6>
    </div>
</body>

</html>